{% load unfold %}

{% with tabs=adminform|tabs %}
    {% if tabs %}
        <div x-data="{openTab: null}" x-show="activeTab == 'general'">
            <ul class="bg-gray-100 border border-transparent flex gap-10 mb-6 px-4 py-3 rounded-md text-font-default-light text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-font-default-dark">
                {% for fieldset in tabs %}
                    <li>
                        <a class="cursor-pointer font-semibold hover:text-gray-700 dark:hover:text-white"
                           x-on:click="openTab = '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'"
                           x-bind:class="openTab == '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'{% if forloop.first %} || openTab == null{% endif %} ? 'text-font-important-light dark:text-font-important-dark' : ''">
                            {{ fieldset.name }}
                        </a>
                    </li>
                {% endfor %}
            </ul>

            {% for fieldset in tabs %}
                <div class="tab-wrapper{% if fieldset.name %} fieldset-{{ fieldset.name|slugify }} fieldset-{{ forloop.counter0 }}-{{ fieldset.name|slugify }}{% endif %}"
                     x-show="openTab == '{{ forloop.counter0 }}-{{ fieldset.name|slugify }}'{% if forloop.first %} || openTab == null{% endif %}">
                    {% include 'admin/includes/fieldset.html' %}
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endwith %}
